www.gusucode.com > 立体效果的搜索框 HTML5特效源码程序 > 立体效果的搜索框 HTML5特效/纯CSS3 3D搜索框/纯CSS3 3D搜索框/styles.css
/* * Title: CSS3 Solid UI * Author: Bharani M * URL: http://www.hongkiat.com */ /*-------------------BASE STYLES--------------------*/ html, body { padding: 0; margin: 0; } html { background: #f8f4e8 url("bg_tile.jpg") left top repeat; } body { font: 16px/1.5 Calibri, Helvetica, Arial, sans-serif; } #wrapper { width: 430px; margin: 200px auto; } h1 { font-family: 'Oswald', Calibri, "Helvetica Neue", Arial, serif; font-size: 54px; font-weight: bold; } p { color: #545454; margin-top: 50px; } a { text-decoration: none; color: #000; padding-bottom: 1px; } a:hover, a:focus { border-bottom: 1px dotted #000; } /*---------------------SEARCH FIELD--------------------*/ #main { width: 400px; height: 50px; background: #f2f2f2; padding: 6px 10px; border: 1px solid #b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; } input[type="text"] { float: left; width: 230px; padding: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; border: 1px solid #999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; } input[type="submit"].solid { float: left; cursor: pointer; width: 130px; padding: 8px 6px; margin-left: 20px; background-color: #f8b838; color: rgba(134, 79, 11, 0.8); text-transform: uppercase; font-weight: bold; border: 1px solid #99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /*Download by http://www.codesc.net*/ text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9); -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-transition: background 0.2s ease-out; } input[type="submit"].solid:hover, input[type="submit"].solid:focus { background: #ffd842; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc; } input[type="submit"].solid:active { background: #f6a000; position: relative; top: 5px; border: 1px solid #702d00; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; }